<template>
  <div class="app">
    <!-- 差值表达式 -->
    <div v-cloak>{{ msg }}</div>
    <div v-text="msg"></div>
    <div v-html="msg"></div>

    <!--

      差值表达式有页面闪烁问题

        1. 给指定的标签添加 v-cloak 指定，并设置隐藏的样式 display: none

        2. 当vue解析完毕之后自动删除v-cloak，刚好数据也解析完毕了

      v-text 不解析html
      v-html 先解析html，在渲染

      v-text 和 v-html 没有闪烁问题
     -->
  </div>
</template>

<script>
export default {
  // 建议使用该写法
  data() {
    return {
      msg: '<mark>柱子<mark>'
    }
  },
  methods: {},
  components: {}
  // 这个没有this指向
  // data: () => ({
  //   msg: '柱子'
  // })
}
</script>
<style lang="scss">
[v-cloak] {
  display: none;
}
</style>
